#content{
	padding: 24px;
	background: #eee;
}
.speech {
 margin: 20px 0;
 table-layout: fixed;
 word-break: break-all;
 position: relative;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 text-shadow:none;
}

div.speech:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 left: 17px;
 top: -16px;
 border: 8px solid;
 border-color: transparent transparent #ffffff transparent;
}
div.speech.right {
 box-shadow: -2px 2px 5px #CCC;
 margin-right: 20px;
 max-width: 50%;
 float: right;
 background: #82d3c2;
}
div.speech.right:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 bottom: auto;
 left: auto;
 border-width: 8px 0 8px 9px;
 border-color: transparent #82d3c2;
}
div.speech.left {
 box-shadow: 2px 2px 2px #CCCCCC;
 margin-left: 20px;
 max-width: 50%;
 float: left;
 background: #fff;
}

div.speech.left:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 bottom: auto;
 border-width: 8px 9px 8px 0;
 border-color: transparent #fff;
}
.leftimg {
 float: left;
}
.rightimg {
 float: right;
}
.rightimg img,.leftimg img{
	border-radius:50%;
}
.leftd,.rightd {
 clear: both;
}

@media screen and (min-width: 320px){
.speech{
	font-size: 13px;
	padding:9px ; 
}
.leftimg,.rightimg{
	margin-top: 15px;
}
	.rightimg img,.leftimg img{
		width: 40px;
		height: 40px;
		border: 2px solid #fff;
	}
div.speech.left:after {
 top: 9px;
 left: -7px;
}
div.speech.right:after {
 top: 9px;
 right: -7px;
}
}
@media screen and (min-width: 410px){
.speech{
	font-size: 17px;
	padding:11px ; 
}
.leftimg,.rightimg{
	margin-top: 15px;
}
	.rightimg img,.leftimg img{
		width: 50px;
		height: 50px;
		border: 2px solid #fff;
	}
div.speech.left:after {
 top: 14px;
 left: -8px;
}
div.speech.right:after {
 top: 14px;
 right: -8px;
}
}
@media screen and (min-width: 600px){
.speech{
	font-size: 25px;
	padding:20px ; 
}
.leftimg,.rightimg{
	margin-top: 10px;
}
	.rightimg img,.leftimg img{
		width: 82px;
		height: 82px;
		border: 4px solid #fff;
	}
div.speech.left:after {
 top: 25px;
 left: -9px;
}
div.speech.right:after {
 top: 25px;
 right: -9px;
}
}
@media screen and (min-width: 801px){
.speech{
	font-size: 31px;
	padding:25px ; 
}
	.rightimg img,.leftimg img{
		width: 102px;
		height: 102px;
		border: 4px solid #fff;
	}
}



